<template>
    <el-main>
        <el-card class="ep-card ep-search">
            <el-form :model="searchForm" label-width="150px">
                <el-row :gutter="0">
                    <el-col :span="7">
                        <el-form-item label="开始时间">
                            <el-date-picker type="date" v-model="searchForm.startTime" @change="startTimeChange" placeholder="请输入开始时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="截止时间">
                            <el-date-picker type="date"  v-model="searchForm.endTime" :picker-options="expireTimeOption" placeholder="请输入截止时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" style="float:right">
                        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="ep-card" style="height: calc(100vh - 230px);">
            <el-row style="margin-top: 10px;">
                <el-table :data="tableData" border :height="height"  style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="30">  </el-table-column>
                    <el-table-column type="index" label="序号" align="center" width="50">
                    </el-table-column>
                    <el-table-column align="center" label="摘要" min-width="400" >
                        <template slot-scope="scope">
                            <span>{{scope.row.topic.substring(0,scope.row.topic.indexOf("("))}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  align="center" label="当前环节" min-width="180" >
                        <template slot-scope="scope">
                            <span>{{scope.row.topic.substring(scope.row.topic.indexOf(") - ")+4)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="beginTime" align="center" min-width="180" label="开始时间" type="date" :formatter="dateFormatter">
                    </el-table-column>
                    <el-table-column prop="attendUserName" align="center" min-width="180" label="处理人">
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="操作"  width="240"  fixed="right">
                        <template slot-scope="scope">
                            <el-button type="info" size="small" @click="progress(scope.row)">进展</el-button>
                            <el-button type="success" size="small" @click="edit(scope.row)">处理</el-button>
                            <el-button type="danger" size="small" icon="el-icon-edit" @click="consign(scope.row)" v-if="scope.row.isConsign=='1'" >委托</el-button>
                            <el-button type="primary" icon="el-icon-edit-outline" size="small" @click="consign(scope.row)" v-else >委托</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align:right" v-show="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page" background :page-sizes="[20, 40, 60, 80]" :page-size="pager.size" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
                </el-pagination>
            </el-row>
        </el-card>
        <el-dialog  title="委托处理" :visible.sync="dialogFormVisible" :before-close="handleFormClose">
            <el-form :model="tasklog" >
              
              <el-form-item label="委托人" label-width="120px">
                  <el-select v-model="tasklog.consignUser" filterable placeholder="请选择" >
                      <el-option label="请选择" value="">
                    </el-option> 
                    <el-option v-for="item in users" :key="item.id" :label="item.realName" :value="item.id"
                    v-if="item.id!=user.id"
                    >
                    </el-option>    
                </el-select>
              </el-form-item>
              <el-form-item label="是否委托" label-width="120px" >
                    <el-switch
                        v-model="useable"
                        @change = "stateChange"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>

             </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleFormClose">取 消</el-button>
                    <el-button type="primary" @click="doSave">保 存</el-button>
                </div>
           
        </el-dialog>
    </el-main>
</template>
<script src="../js/IndexJS.js"></script>
<style lang='scss' scoped>
.el-table {
  width: 99.9% !important;
}
</style>
